<template>
      <!-- 人员管理下的管理员模块中的操作:员工组件 -->
      <el-dialog title="管理的员工名单:" :visible.sync="isDialogFormVisible" width="67%">
            <el-table
                :data="tableData"
                style="width: 100%"
                height="530"
                max-height="530"
                :row-class-name="tableRowClassName">

                <el-table-column
                prop="username"
                label="用户名"
                width="80">
                </el-table-column>
                <el-table-column
                prop="sex"
                label="性别"
                width="50">
                </el-table-column>
                <el-table-column
                prop="age"
                label="年龄"
                width="50">
                </el-table-column>
                <el-table-column
                prop="phone"
                label="手机号"
                width="120">
                </el-table-column>
                <el-table-column
                prop="address"
                label="地址"
                width="200">
                </el-table-column>
                <el-table-column
                prop="last_login_time"
                label="近期登录"
                width="100">
                </el-table-column>
                <el-table-column
                prop="status"
                label="身份"
                width="90">
                </el-table-column>
                <el-table-column
                prop="area"
                label="管理范围"
                width="200">
                </el-table-column>
                <el-table-column
                prop="create_time"
                label="创建时间"
                width="100">
                </el-table-column>
                <el-table-column
                prop="update_time"
                label="最近更新时间"
                width="110">
                </el-table-column>
            </el-table>

        </el-dialog>
</template>

<script>

export default {
    name:'AdminEmployee',
    props:['tableData'],
    data() {
        return {
            // 控制对话框的展示
            isDialogFormVisible:false,
        }
    },
    watch:{
        // 所展示的数据发生变更之时,显示对话框
        tableData(){
            this.isDialogFormVisible = true;
        }
    },
    methods:{
        // table表格出现绿色的条纹
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex % 2 === 1) {
                    return 'success-row';
            } 
            return '';
        }
    },
}
</script>

<style lang="less" scoped>

</style>